<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body{background: black;}
		#draw{background: white;}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var oDraw=document.getElementById('draw');
			var oC=oDraw.getContext('2d');
			var setArr=[];
			oDraw.width=document.documentElement.clientWidth;
			setInterval(function(){
				oC.clearRect(0,0,oDraw.width,oDraw.height);
				for(var i=0;i<setArr.length;i++){
					setArr[i].sy+=0.02;
					setArr[i].x+=setArr[i].sx;
					setArr[i].y+=setArr[i].sy;
					if(setArr[i].y>=oDraw.height-setArr[i].r){
						setArr[i].y=oDraw.height-setArr[i].r;
						setArr[i].sy*=-1;
						setArr[i].sy*=0.9;
						setArr[i].sx*=0.9;
					}
					if(Math.abs(setArr[i].sx)<=0.01){
						setArr.splice(i,1);
					}
				}
				for(var i=0;i<setArr.length;i++){
					oC.beginPath();
					oC.fillStyle='rgba('+setArr[i].c1+','+setArr[i].c2+','+setArr[i].c3+','+setArr[i].c4+')';
					oC.moveTo(setArr[i].x,setArr[i].y);
					oC.arc(setArr[i].x,setArr[i].y,setArr[i].r,0,360*Math.PI/180,false);
					oC.closePath();
					oC.fill();
				}
			},1000/60);
			setInterval(function(){
				var x =oDraw.width/2;
				var y =oDraw.height-20;
				var r =10;
				var c1=Math.floor(Math.random()*255);
				var c2=Math.floor(Math.random()*255);
				var c3=Math.floor(Math.random()*255);
				var c4=1;
				var sx=Math.random()*6-3;
				var sy=-(Math.random()*3+1);
				setArr.push({
					x :x ,
					y :y ,
					r :r ,
					c1:c1,
					c2:c2,
					c3:c3,
					c4:c4,
					sy:sy,
					sx:sx
				})
			},100);
		}
	</script>
</head>
<body>
	<canvas id="draw" height="500"></canvas>
</body>
</html>